<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>设置角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" th:href="@{/authree/layui/css/layui.css}" media="all">
</head>
<body>
<!-- 设置角色 -->
<form class="layui-form">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <div id="rights-tree"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-submit lay-filter="submit">设置角色</button>
            <button class="layui-btn layui-btn-primary closeLayer">取消</button>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/authree/layui/layui.all.js}" charset="utf-8"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var treeResult = [[${treeResult}]];
    var roleId = [[${roleId}]];
    /*]]>*/
</script>
<script type="text/javascript" th:inline="none">
    var authtreeUrl = basePath + "/authree/extends/";
    console.log(authtreeUrl);
    layui.config({
        base: authtreeUrl  //authtree.js所在目录
    }).extend({
        authtree: 'authtree',
    }).use(['jquery', 'authtree', "layer"], function () {
        var $ = layui.jquery;
        var authtree = layui.authtree;
        var setAuthorizationUrl = basePath + "/rights/setAuthorization";
        var changed = false;
        var layer = parent.layui.layer;
        var index = layer.getFrameIndex(window.name);//弹出层窗口index

        var trees = authtree.listConvert(treeResult.data.list, {
            primaryKey: 'rightsId'
            , startPid: 0
            , parentKey: 'parentId'
            , nameKey: 'rightsName'
            , valueKey: 'rightsId'
            , checkedKey: treeResult.data.checkedId
        });

        authtree.render('#rights-tree', trees, {
            inputname: 'rightsIds[]',
            layfilter: 'checkRights',
            autowidth: true,
            openall:true,
        });

        form.on('checkbox(checkRights)', function () {
            changed = true;
        });

        form.on('submit(submit)', function () {
            if (!changed) {
                layer.msg("改变后再提交!");
                return false;
            }
            var rightsIds = authtree.getChecked('#rights-tree');
            console.log(rightsIds);
            $.ajax({
                url: setAuthorizationUrl,
                dataType: 'json',
                type: 'post',
                data: {
                    'roleId': roleId,
                    'rightsIds': rightsIds,
                },
                traditional: true,//不加这个参数服务器端接受不到数据
                success: function (result) {
                    layer.msg(result.message);
                    if (result.code == 0) {
                        layer.close(index);
                    }
                }
            });
            return false;
        });

        $(".closeLayer").click(function () {
            layer.close(index);
        });

    });
</script>


</body>
</html>